CSS tabellen

tabellen-css De standaard opmaak voor tabellen is onaantrekkelijk.

De Jommeke's gegevens, die we in een HTML-tabel geplaatst hebben is een voorbeeld van spreadsheet gegevens. De niet opgemaakte HTML-tabel ziet er gewoontjes uit. Alleen de caption en de th elementen staan standaard in het vet.

Gelukkig kunnen we de tabel met behulp van CSS het uiterlijk van onze tabel gegevens zelf controleren.

Wat hieraan voorafgaat

HTML tabellen

Wat hierop volgt

CSS tabellen opdracht

Doelstelling

Na deze les weet je hoe je tabellen met CSS opmaakt. Je leert hoe je:
1. cellen voorziet van opvulling: als de tekst in een tabelcel de rand of een andere cel raakt, is de tekst niet goed leesbaar. Voeg opvulling toe en de leesbaarheid verbetert;
2. koppen onderscheidt van de andere cellen: alle tabelkoppen vet maken (de standaardstijl voor het element th) maakt het gemakkelijker om de tabel in één oogopslag te lezen. Je kunt ze ook in hoofdletters zetten en ze een achtergrondkleur geven of ze onderstrepen om ze duidelijk van de inhoud te onderscheiden;
3. even en oneven rijen en kolommen een andere kleur geeft: rijen om en om kleuren helpt de gebruiker de rijen te volgen. Gebruik een kleur die subtiel afwijkt van de andere rijen zodat de tabel er als één geheel blijft uitzien;
4. getallen rechtsuitlijnt: je kunt de eigenschap text-align gebruiken om de inhoud van een kolom die getallen bevat rechts uit te lijnen, zodat grote getallen duidelijk onderscheiden worden van kleinere. Op die manier volg je de wiskundige manier van getallen schrijven;
5. een rollover effect maakt;

Video

Algemeen

Let erop dat je bij het opmaken van een tabel aandacht besteed aan:
- Voorzie cellen van opvulling (padding): als de tekst in een tabelcel de rand of een andere cel raakt, is de tekst niet goed leesbaar. Voeg witruimte toe en de leesbaarheid verbetert.
- Onderscheid koppen van de andere cellen: alle tabelkoppen vet maken (de standaardstijl voor het element th) maakt het gemakkelijker om te tabel in één oogopslag te lezen. Je kunt ze ook in hoofdletters zetten en ze een achtergrondkleur geven of ze onderstrepen om ze duidelijk van de inhoud te onderscheiden.
- Geef even en oneven rijen een andere kleur: rijen om en om kleuren helpt de gebruiker de rijen te volgen, zeker voor tabellen met heel veel rijen. Gebruik een kleur die subtiel afwijkt van de andere rijen zodat de tabel er als één geheel blijft uitzien.
- Lijn getallen rechts uit: je kunt de eigenschap textalign gebruiken om de inhoud van een kolom die getallen bevat rechts uit te lijnen, zodat grote getallen duidelijk onderscheiden worden van kleinere. Op die manier volg je de wiskundige manier van getallen schrijven.
We hebben al verschillende CSS eigenschappen gezien die ook met tabellen gebruikt kunnen worden.
Hier volgen enkele voorbeelden:
- width om de breedte van de tabel op te geven
- padding om de ruimte tussen de rand van elke cel en de inhoud ervan in te stellen
- text-transform om de inhoud van de koppen van de tabel om te zetten in hoofdletters
- letter-spacing en font-size om aanvullende styling aan de inhoud van de tabelkoppen toe te voegen
- border, border-top en border-bottom om randen boven en onder de tabelkoppen in te stellen
- text-align om tekst van bepaalde cellen links uit te lijnen en die van de andere rechts
- background-color om de achtergrondkleur van de even en oneven rijen in te stellen
- :hover om een rij te markeren wanneer een gebruiker er met de muis overheen zweeft
Nieuwe eigenschappen, selectoren, ezn. die we in deze les leren:
- met behulp van de CSS nth-child selector, kunnen voor elke rij een andere stijl definiëren;

Tabelopmaak

We gaan deze opmaak realiseren:

Welke stijlregels heb je nodig om een tabel weer te gegeven zoals een desktop spreadsheet?

We gaan de stijlregens voor een desktop spreadsheet in een klasse onderbrengen met de naam spreadsheet. De stijlregels plaatsen we in een CSS bestand met de naam spreadsheet.css.
1. Maak een submap in je werkmap en geef er de naam css aan.
2. In die css submap maak je een CSS bestand met de naam spreadsheet.css. Je mappenstructuur ziet er als volgt uit:
  
  tabellen met css map structuur

Als voorbeeld gebruiken we de HTML uit de les HTML tabellen. Zonder de inline CSS en zonder de commentaar en met extra rijen. Een langere tabel opmaken is uitdagender. We geven er de naam tabellen-met-css.html aan.

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="application-name" content="Webtechnologie">
    <meta name="description" content="tabellen opmaken met CSS">
    <meta name="keywords" content="html, css, child selector, even, od, border, color">
    <meta name="author" content="Jef Inghelbrecht">
    <meta name="date" content="2020-16-05">
    <meta name="time" content="18:23:33">
    <link rel="stylesheet" href="css/spreadsheet.css">
    <title>Tabellen op maken met CSS</title>
</head>
<body>
    <table class="spreadsheet">
        <caption>
            Jommeke strips
        </caption>
        <thead>
            <tr>
                <th rowspan="2">Nummer</th>
                <th rowspan="2">Titel</th>
                <th rowspan="2">Kaft</th>
                <th colspan="3">Kostprijs</th>
            </tr>
            <tr>
                <th scope="col">&euro;</th>
                <th scope="col">&yen;</th>
                <th scope="col">&pound;</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jacht op een voetbal</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>3,76</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>De zingende aap</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>3,76</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>De Koningin van Onderland</td>
                <td>Hardcover</td>
                <td>8,22</td>
                <td>54,1</td>
                <td>5,91</td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>Purperen pillen</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>3,76</td>
            </tr>
            <tr>
                <th scope="row">5</th>
                <td>De Muzikale Bella</td>
                <td>Hardcover</td>
                <td>8,22</td>
                <td>54,1</td>
                <td>5,91</td>
            </tr>
            <tr>
                <th scope="row">6</th>
                <td>Het hemelhuis</td>
                <td>Softcover</td>
                <td>12,22</td>
                <td>34</td>
                <td>31,76</td>
            </tr>
            <tr>
                <th scope="row">7</th>
                <td>De zwarte Bomma</td>
                <td>Softcover</td>
                <td>5</td>
                <td>34</td>
                <td>3</td>
            </tr>
            <tr>
                <th scope="row">8</th>
                <td>De ooievaar van Begonia</td>
                <td>Softcover</td>
                <td>15,50</td>
                <td>34</td>
                <td>4</td>
            </tr>
            <tr>
                <th scope="row">9</th>
                <td>De Schildpaddenschat</td>
                <td>Softcover</td>
                <td>5,50</td>
                <td>34</td>
                <td>8</td>
            </tr>
            <tr>
                <th scope="row">10</th>
                <td>De straalvogel</td>
                <td>Hardcover</td>
                <td>220,80</td>
                <td>4,1</td>
                <td>59</td>
            </tr>
            <tr>
                <th scope="row">11</th>
                <td>De Zonnemummie</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>3,76</td>
            </tr>
            <tr>
                <th scope="row">12</th>
                <td>Paradijseiland</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>3,76</td>
            </tr>
            <tr>
                <th scope="row">13</th>
                <td>Het Jampuddingspook</td>
                <td>Softcover</td>
                <td>8,95</td>
                <td>34</td>
                <td>3</td>
            </tr>
            <tr>
                <th scope="row">14</th>
                <td>Op Heksenjacht</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>4</td>
            </tr>
            <tr>
                <th scope="row">15</th>
                <td>Het Staartendorp</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>7</td>
            </tr>
            <tr>
                <th scope="row">16</th>
                <td>De Gouden Jaguar</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>3,76</td>
            </tr>
            <tr>
                <th scope="row">17</th>
                <td>Diep in de put</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>3,76</td>
            </tr>
            <tr>
                <th scope="row">18</th>
                <td>Met Fifi op reis</td>
                <td>Hardcover</td>
                <td>8,22</td>
                <td>54,1</td>
                <td>5,91</td>
            </tr>
            <tr>
                <th scope="row">19</th>
                <td>Wie zoekt die vindt</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>3,76</td>
            </tr>
            <tr>
                <th scope="row">20</th>
                <td>Apen in huis</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>3,76</td>
            </tr>
            <tr>
                <th scope="row">21</th>
                <td>Het verkeerde land</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>3,76</td>
            </tr>
            <tr>
                <th scope="row">22</th>
                <td>Het wonderdrankje</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>3,76</td>
            </tr>
            <tr>
                <th scope="row">23</th>
                <td>Dolle fratsen</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>3,76</td>
            </tr>
            <tr>
                <th scope="row">24</th>
                <td>Verloren zoon</td>
                <td>Softcover</td>
                <td>110,22</td>
                <td>34</td>
                <td>13,76</td>
            </tr>
            <tr>
                <th scope="row">25</th>
                <td>De zeven Snuifdozen</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>3,76</td>
            </tr>
            <tr>
                <th scope="row">26</th>
                <td>Kinderen Baas</td>
                <td>Hardcover</td>
                <td>8,22</td>
                <td>54,1</td>
                <td>5,91</td>
            </tr>
    </table>
</body>
</html>

We voegen de meta tag's toe.
We linken het css bestand aan het HTML bestand.
We passen het title element aan en plaatsen er de tekst Tabellen opmaken met CSS. in
We voegen een class eigenschap toe aan de HTML tabel en stellen de waarde in op spreadsheet.

Kaders en randen
1. een kader rond de tabel (plaats de CSS stijlregel in het bestand css/spreadsheet.css:
```
.spreadsheet {
    border: 1px solid #a6aac6;
}
```
  Let erop dat de caption niet in het kader is opgenomen:
  
  tabel met kader
2. We willen een rand rond de cellen in de tabel. We hebben twee soorten cellen, td en th. We moeten dus beiden selecteren:
```
.spreadsheet td, .spreadsheet th {
    border: 1px solid #a6aac6;
}
```
  tabel met kader en celranden met witruimte ertussen
  
  Er staat nu wel een kader rond de cellen maar er staat overal witruimte tussen wat zorgt voor dubbele lijnen. Deze neem je wel door het border-collapse attribuut van het table element in te stellen op de waarde collapse:
```
.spreadsheet {
    border: 1px solid #a6aac6;
    border-collapse: collapse;
}
```
  tabel met kader en celranden
Lettertype, lettergrootte, gewicht, witruimte, kleur en achtgrondkleur Het reultaat van het instellen van lettergrootte, lettertype, gewicht, witruimte, kleur en achtergrondkleur:

CSS Jommeke tabel met basis eigenschappen ingesteld

Niet slecht. Maar er ontbreken nog enkele zaken:
1. Het lettertype in een tabel mag wat strengen met minder 'voeten', serifs genoemd.
2. serif / sans-serif
  
  De standaard serif font Times Roman is te speels voor een tabel. We nemen de sans-serif font Verdana. We stellen het lettertype in voor het table element en dit lettertype wordt dan doorgegeven aan alle element in het table element (cascading):
```
.spreadsheet {
    border: 1px solid #a6aac6;
    border-collapse: collapse;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
```
3. Het caption element
  Het lettertype van de titel van de tabel mag iets groter en het gewicht mag in vet.
  De achtergrondkleur stellen we in op grijs.
  De kleur van de tekst in bijna zwart.
  Met de caption-side eigenschap plaatsen we de titel onderaan de tabel.
```
.spreadsheet caption {
    font-size: larger;
    font-weight: bold;
    background-color: #b0b0b0;
    color:  #111;
    padding:  0.4em 0 0.4em 0;
    caption-side: bottom;
}
```
4. De kolom- en rijkoppen
  We maken een aparte stijlregel daarvoor:
```
.spreadsheet th {
    border: 1px solid #828282;
    background-color:#E0E0E0;
    font-weight: bold;
    text-align: center;
    padding:  0.2em;
}
```
  - de th heeft een kader;
  - achtergrond kleur stellen we in op een grijstint;
  - het gewicht stellen we in op vet;
  - de tekst in de kopcellen wordt gecentreerd;
  - rondom de tekst plaatsen we 0.2em witruimte;
  - de lettergrootte is standaard, we hoeven dus niets toe te voegen daarvoor;
5. De datacellen
  We maken voor de td elementen ook een aparte stijlregel:
```
.spreadsheet td {
    border: 1px solid #a6aac6;
    padding: 0.2em 0.4em;
}
```
- de prijs voor een album moet rechts uitgelijn worden;
- het is een lange tabel, het zou goed zijn als de achtergrondkleur van de even rijen verschilt van die van de even rijen.

child pseudoklassen gebruiken

We beginnen met het instellen van achtergrondkleur voor even en oneven rijen. We gebruiken daarvoor de :nth-child pseudoklasse en de waarden even en odd. Let erop dat we de child combinator gebruiken om alleen de rijen in het tbody element in te stellen. Hier zie je het voordeel van het gebruik van semantische table elementen!

.spreadsheet tbody tr:nth-child(even) {
    background-color: #f0f8ff; /* Alice blue */
}
.spreadsheet tbody tr:nth-child(odd) {
    background-color: #fff8e7; /* cosmic latte */
}

We kunnen ook een formule gebruiken i.pv. van even en odd:

.spreadsheet tbody tr:nth-child(2n) {
    background-color: #f0f8ff; /* Alice blue */
}
.spreadsheet tbody tr:nth-child(2n + 1) {
    background-color: #fff8e7; /* cosmic latte */
}

2n betekent 2 * n, waarbij n start op 0 en voor elke kind-element vermeerderd wordt met één.

<table>	n	2n (= even)	2n + 1 (odd)
<tr>	0	0 (bestaat niet en zal niet worden geselecteerd)	1
<tr>	1	2	3
<tr>	2	4	5
<tr>	3	6	7
<tr>	4	8	9

We hebben nu de nodige kennis om de laatste drie cellen van elke van het tbody element te selecteren het het text-align attribuut in te te stellen op right. Want prijzen in een tabel worden gewoonlijk rechtsuitgelijn.

We gebruiken de :nth-last-child selector met de formule -n + 3:

<tr>	n	-n + 3
<td>	0	3 (de derde laatste rij, prijs in €)
<td>	1	2 (de tweede laatste rij, prijs in ¥)
<td>	2	1 (de laatste rij, prijs in £)
<td>	3	0 (bestaat niet en zal niet worden geselecteerd)
<td>	4	-1 (bestaat niet en zal niet worden geselecteerd)
<td>	5	-2 (bestaat niet en zal niet worden geselecteerd)

De stijlregel:

.spreadsheet tbody tr td:nth-last-child(-n + 3) {
    text-align: right;
}

Alleen de cellen in de kolommen met een kostprijs zijn rechtsuitgelijnd.

Rollover effect
Een rij markeren wanneer de gebruiker erover gaat me de muis is met CSS gemakkelijk te implementeren.
1. Probleem
  
  Hoe kan je een rij van achtergrondkleur te veranderen als de muis er overheen zweeft? En hoe zorg je ervoor dat alleen de rijen met een boek selectbaar zijn. Dus niet de rijen met de kolomtitels.
  
  Dat is nog manier om de leesbaarheid van de gegevens in tabelvorm te verhogen.
2. Design
  Dit is een zeer eenvoudige oplossing voor. Je hoeft alleen de volgende stijlregel aan je CSS toe te voegen:
```
.datatable tr: hover {background-color: # DFE7F2; color: # 000; }
```
  Klaar is Kees!
  
  We hebben al gezien hoe je pseudoklasse :hover kan gebruiken met het <a> element. Welnu je kan de pseudoklasse :hover op andere elementen ook gebruiken om leuke effecten te creëren.
  
  Let erop dat de :hover pseudoklasse stijlregel na de standaard stijlregels voor tr komen!!!!
  
  We willen het rollover effect voor de rijen die in het tbody element staan en gebruiken daarom de volgende child combinator:
```
.spreadsheet tbody tr:hover {
    background-color: #a6aac6;
    color: white;
}
```
  CSS Jommeke tabel rollover effect
Nu nog de link toevoegen naar de spreadsheet tabel in de index.html pagina.

Wat hieraan voorafgaat

HTML tabellen

Wat hierop volgt

CSS tabellen opdracht

2020-10-18 11:13:20